<!DOCTYPE html>
<html>
<head>
<!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Site Properties -->
<title>登录</title>
<link rel="stylesheet" type="text/css" href="resources/dist/components/reset.css">
<link rel="stylesheet" type="text/css" href="resources/dist/components/site.css">
<link rel="stylesheet" type="text/css" href="resources/dist/components/container.css">
<link rel="stylesheet" type="text/css" href="resources/dist/components/grid.css">
<link rel="stylesheet" type="text/css" href="resources/dist/components/header.css">
<link rel="stylesheet" type="text/css" href="resources/dist/components/image.css">
<link rel="stylesheet" type="text/css" href="resources/dist/components/menu.css">
<link rel="stylesheet" type="text/css" href="resources/dist/components/divider.css">
<link rel="stylesheet" type="text/css" href="resources/dist/components/segment.css">
<link rel="stylesheet" type="text/css" href="resources/dist/components/form.css">
<link rel="stylesheet" type="text/css" href="resources/dist/components/input.css">
<link rel="stylesheet" type="text/css" href="resources/dist/components/button.css">
<link rel="stylesheet" type="text/css" href="resources/dist/components/list.css">
<link rel="stylesheet" type="text/css" href="resources/dist/components/message.css">
<link rel="stylesheet" type="text/css" href="resources/dist/components/icon.css">
<link rel="stylesheet" type="text/css" href="resources/static/style/alert.css">
<script src="resources/static/libs/jquery.min.js"></script>
<script src="resources/dist/semantic.js"></script>
<script src="resources/dist/components/form.js"></script>
<script src="resources/dist/components/transition.js"></script>
<script src="resources/static/libs/alert.js"></script>
<style type="text/css">
body {
	background-color: #DADADA;
}

body>.grid {
	height: 100%;
}

.image {
	margin-top: -100px;
}

.column {
	max-width: 450px;
}
</style>
<script>
	$(document).ready(function() {
		//routing url
		$.fn.api.settings.api = {
			'sign in' : '/query-system/sign/in',
			'sign up' : '/query-system/sign/up'
		};
		$('.ui.form').form({
			fields : {
				email : {
					identifier : 'username',
					rules : [ {
						type : 'empty',
						prompt : '请输入你的用户'
					} ]
				},
				password : {
					identifier : 'password',
					rules : [ {
						type : 'empty',
						prompt : '请输入你的密码'
					}, {
						type : 'length[6]',
						prompt : '密码的长度必须大于6位'
					} ]
				}
			},
			onSuccess : function(e) {
				e.preventDefault();
				$('form .teal.submit.button').api({
					action : 'sign in',
					method : 'POST',
					serializeForm : true,
					on : 'now',
					data : {
						username : '#username',
						password : '#password'
					},
					onSuccess : function(result) {
						if (result.code == 0) {//登录成功
							parent.location.href = 'index.html';
						} else {
							dialog=jqueryAlert({
								'style':'wap',
								'modal':true,
								'content':'此用户不存在或者密码错误',
								'buttons':{
									'确定':function(){
										dialog.close();
									}
								},
								'closeTime':1000,
							});
							if(dialog){
								return dialog.show();
							}
						}
					}
				});
			}
		});
	});
</script>
</head>
<body>
	<div class="ui middle aligned center aligned grid">
		<div class="column">
			<h2 class="ui teal image header">
				<div class="content">登录你的帐号</div>
			</h2>
			<form class="ui large form" data-tooltip="此用户不存在或者密码错误,请重新输入" data-position="top center">
				<div class="ui stacked segment">
					<div class="field">
						<div class="ui left icon input" id="username">
							<i class="user icon"></i> <input type="text" name="username" placeholder="UserName">
						</div>
					</div>
					<div class="field">
						<div class="ui left icon input" id="password">
							<i class="lock icon"></i> <input type="password" name="password" placeholder="Password">
						</div>
					</div>
					<div class="ui fluid large teal submit button"> Login</div>
				</div>
				<div class="ui error message" id="errorMessage"></div>
			</form>
			<div class="ui message">
				New to us? <a href="sign up">Sign Up</a>
			</div>
			<div class="ui container">
				<div class="ui horizontal list">
					<div class="item">
						<div class="content">Terms</div>
					</div>
					<div class="item">
						<div class="content">Privacy</div>
					</div>
					<div class="item">
						<div class="content">Security</div>
					</div>
					<div class="item">
						<div class="content">About We</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>

</html>
